<template>
    <div class="component-workplace-item app-right-icon" @click="$emit('onclick')">
        <div class="header"><span v-if="data.setUp" class="set-up">置顶</span>{{data.title}}</div>
        <div class="content-box" :style="{color: labelColor}">
            <div class="left-box">薪资：<span>{{data.amount}}</span></div>
            <div class="right-box">地点：<span>{{data.place}}</span></div>
        </div>
        <div class="name" :style="{color: labelColor}">公司：<span>{{data.name}}</span></div>
        <div v-if="data.date" class="name" :style="{color: labelColor}">发布：<span>{{data.date}}</span></div>
    </div>
</template>

<style lang="less" scoped>

    @import '../style/variable';

    .component-workplace-item {
        padding: 1.2rem 1.5rem 1.1rem 0;
        margin-left: 1.5rem;
        &:not(:last-child){
            border-bottom: 1px solid @color-line-gray;
        }
        .header {
            font-size: 1.5rem;
            line-height: 2.1rem;

            .set-up{
                display: inline-block;
                width: 3rem;
                line-height: 1.8rem;
                font-size: 1rem;
                background-color: @color-block-red;
                margin: .15rem .3rem .15rem 0;
                text-align: center;
                color: @color-white;
                vertical-align: bottom;
                border-radius: .2rem;
            }
        }
        .content-box{
            display: flex;
            line-height: 2rem;
            color: @color-text-gray;
            margin-top: .7rem;
            .left-box{
                width: 13.8rem;
            }
            .right-box{
                flex: 1
            }
            span{
                color: @color-text-red;
            }
        }
        .name{
            color: @color-text-gray;
            margin-top: .7rem;
            span{
                color: @color-text-black;
            }
        }

    }

</style>

<script>
    export default {
        props: ['data', 'label-color']
    }
</script>